<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import {
  DeviceStatisticsApi,
  DeviceStatisticsByDepartmentApi,
  UserFileReportApi
} from '@/api/table'
import { ref, unref, reactive } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { BaseButton } from '@/components/Button'
import type { DepartmentItem } from '@/api/department/types'
import { getTreeDepartmentsApi } from '@/api/department'
import { ElTabs, ElTabPane, ElProgress, TabsPaneContext } from 'element-plus'
const { t } = useI18n()
const activeName = ref('first')

const columns: TableColumn[] = [
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },
  {
    field: 'manufacturer',
    label: t('device.manufacturer')
  },

  {
    field: 'userCount',
    label: '作业人数'
  },
  {
    field: 'deviceCount',
    label: '设备总数量'
  },
  {
    field: 'rightCount',
    label: '正常数量'
  },
  {
    field: 'repairCount',
    label: '维修数量'
  },
  {
    field: 'stopCount',
    label: '停用数量'
  },
  {
    field: 'cacelCount',
    label: '注销数量'
  },
  {
    field: 'usingRate',
    label: '使用率',
    slots: {
      default: (data) => {
        return (
          <ElProgress
            type="dashboard"
            percentage={data.row.usingRate}
            v-slots={{
              default: () => (
                <div class="clome">
                  <span class="percentage-value">{data.row.usingRate || 0}%</span>
                  <span class="percentage-label">使用率</span>
                </div>
              )
            }}
          ></ElProgress>
        )
      }
    }
  }
]
const columns1: TableColumn[] = [
  {
    field: 'index',
    label: t('userDemo.index'),
    type: 'index'
  },

  {
    field: 'depName',
    label: '部门名称'
  },
  {
    field: 'userCount',
    label: '作业人数'
  },
  {
    field: 'deviceCount',
    label: '设备总数量'
  },
  {
    field: 'rightCount',
    label: '正常数量'
  },
  {
    field: 'repairCount',
    label: '维修数量'
  },
  {
    field: 'stopCount',
    label: '停用数量'
  },
  {
    field: 'cacelCount',
    label: '注销数量'
  },
  {
    field: 'usingRate',
    label: '使用率',
    slots: {
      default: (data) => {
        return (
          <ElProgress
            type="dashboard"
            percentage={data.row.usingRate}
            v-slots={{
              default: () => (
                <div class="clome">
                  <span class="percentage-value">{data.row.usingRate}%</span>
                  <span class="percentage-label">使用率</span>
                </div>
              )
            }}
          ></ElProgress>
        )
      }
    }
  }
]
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    let res
    if (activeName.value == 'first') {
      res = await DeviceStatisticsApi({
        pageNo: unref(currentPage),
        pageRow: unref(pageSize),
        pageModel: { ...unref(searchParams) }
      })
    } else {
      res = await DeviceStatisticsByDepartmentApi({
        pageNo: unref(currentPage),
        pageRow: unref(pageSize),
        pageModel: { ...unref(searchParams) }
      })
    }

    const list = res.data || []

    return {
      list: list,
      total: res.data.totalCount || 0
    }
  }
})
const departmentList = ref<DepartmentItem[]>([])
const fetchDepartment = async () => {
  const res = await getTreeDepartmentsApi({})
  departmentList.value = res.data
}
fetchDepartment()
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList, getElTableExpose, delList } = tableMethods
const searchParams = ref({})
const setSearchParams = (params: any) => {
  if (params.date) {
    params.startTime = params.date[0]
    params.endTime = params.date[1]
    delete params.date
  }
  searchParams.value = params
  getList()
}
const searchSchema = reactive<FormSchema[]>([
  // {
  //   field: 'depGuid',
  //   label: t('userDemo.department'),
  //   component: 'TreeSelect',
  //   componentProps: {
  //     nodeKey: 'guid',
  //     props: {
  //       label: 'depName',
  //       value: 'guid',
  //       children: 'children'
  //     },
  //     placeholder: '请选择部门',
  //     highlightCurrent: true,
  //     expandOnClickNode: false,
  //     checkStrictly: true,
  //     checkOnClickNode: true,
  //     clearable: true
  //   },
  //   optionApi: async () => {
  //     return departmentList.value || []
  //   }
  // },

  {
    field: 'date',
    label: t('problem.time'),
    component: 'DatePicker',
    componentProps: {
      style: { width: '340px' },
      type: 'datetimerange',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      StartPlaceholder: 'Start date',
      EndPlaceholder: 'End date'
    }
  }
])
const handleClick = (name) => {
  console.log(name)
  activeName.value = name
  getList()
}
</script>

<template>
  <ContentWrap>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="厂商统计" name="first">
        <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
        <Table
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :reserveIndex="true"
          :columns="columns"
          :data="dataList"
          :loading="loading"
          @register="tableRegister"
          :max-height="600"
        />
      </el-tab-pane>
      <el-tab-pane label="部门统计" name="second">
        <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
        <Table
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :reserveIndex="true"
          :columns="columns1"
          :data="dataList"
          :loading="loading"
          @register="tableRegister"
          :max-height="600"
        />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>
<style>
.clome {
  display: flex;
  flex-direction: column;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 24px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 10px;
}
</style>
